<template>
  <div>
    <el-container>
      <el-header>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/ssss' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>商品管理</el-breadcrumb-item>
          <el-breadcrumb-item>分类参数</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <el-main>
        <el-alert
          title="注意：只允许为第三级分类设置相关参数！"
          type="warning"
          :closable="false"
          show-icon
        >
        </el-alert>
        选择商品分类：<el-cascader
          v-model="value"
          :options="options"
          @change="handleChange"
          :props="{ value: 'cat_name', label: 'cat_name' }"
          children
        ></el-cascader>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="动态参数" name="first">
            <el-button type="primary">添加参数</el-button>
            <el-button type="primary" disabled>添加参数</el-button>
          </el-tab-pane>
          <el-tab-pane label="静态属性" name="second">配置管理</el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { huoQuGoodsAdd } from '@/api/goodsAdd'
export default {
  name: 'ParamsA',
  data () {
    return {
      options: [],
      value: [],
      activeName: 'first'
    }
  },
  created () {
    this.huoquParams()
  },
  computed: {
  },
  methods: {
    async huoquParams () {
      const res = await huoQuGoodsAdd()
      this.options = res.data
    },
    handleChange (value) {
      console.log(value);
    },
    handleClick (tab, event) {
      console.log(tab, event);
    }
  }
}
</script>
<style lang='less'  scoped>
</style>
